﻿<%@ Page Language="C#" EnableSessionState="True" EnableViewState="true" AutoEventWireup="true" CodeBehind="EmailList.aspx.cs" Inherits="famails.BackEnd.page.EmailList" MasterPageFile="~/Master.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div style="width:100%;padding:10px;">
<!--start content 01-->
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #ddd;margin-bottom:10px;padding:0px;">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#fafafa;color:#333;font-size:18px;font-weight:bold;position:relative;border-bottom:1px solid #ddd;">   
            Danh sách email
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;">
            <asp:Panel Visible="false" ID="pnError" runat="server">
                <div class="error-box round col-md-12 col-xs-12 col-sm-12 col-lg-12">
                    <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                </div>
            </asp:Panel>
            <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                <div class="confirmation-box round col-md-12 col-xs-12 col-sm-12 col-lg-12">
                    <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                </div>
            </asp:Panel> 
        </div>
        <style>
                    #contentjqxgrid {
                        width:100% !important;
                    }
                    #pagerjqxgrid {
                        width:100% !important;
                    }
                    #columntablejqxgrid {
                        width:100% !important;
                    }
            .jqx-grid-header {
                        width:100% !important;
            
            }
        </style>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:0px;">
            <asp:Panel runat="server">
            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:0px;" ID="pnSearch">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:10px;">
                    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding:0px;padding-left:0px;">
                        <div class="col-md-1 col-lg-1 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;">Tên</div>
                        <div class="col-md-4 col-lg-4 col-sm-3 col-xs-6" style="padding:5px;"><asp:TextBox runat="server" CssClass="input_add" id="txtName"></asp:TextBox></div>
                        <div class="col-md-2 col-lg-2 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;text-align:center;">Nhóm email</div>
                        <div class="col-md-5 col-lg-5 col-sm-3 col-xs-6" style="padding:5px;">
                            <asp:DropDownList ID="drlNhomMail" runat="server" CssClass="input_add"></asp:DropDownList></div>
                        <div class="col-md-1 col-lg-1 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;">Điện thoại</div>
                        <div class="col-md-4 col-lg-4 col-sm-3 col-xs-6" style="padding:5px;"><asp:TextBox runat="server" CssClass="input_add" id="txtPhone"></asp:TextBox></div>
                        <div class="col-md-2 col-lg-2 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;text-align:center;">Trạng thái</div>
                        <div class="col-md-5 col-lg-5 col-sm-3 col-xs-6" style="padding:5px;">
                                    <asp:DropDownList ID="ddlStatus" runat="server" CssClass="input_add" >
                                        <asp:ListItem Value="-1">Tất cả</asp:ListItem>
                                        <asp:ListItem Value="0">Email chết</asp:ListItem>
                                        <asp:ListItem Value="1">Còn hoạt động</asp:ListItem>
                                    </asp:DropDownList>
                        </div>
                        <div class="col-md-1 col-lg-1 col-sm-3 col-xs-6" style="padding:5px;line-height:30px;">
                            Email
                        </div>
                        <div class="col-md-4 col-lg-4 col-sm-3 col-xs-6" style="padding:5px;">
                            <asp:TextBox runat="server" CssClass="input_add" id="txtEmail">
                            </asp:TextBox>
                        </div>
                        <div class="col-sm-12 col-xs-12 col-md-7 col-lg-7 " style="padding:5px;text-align:right;">
                            <span id="btnSearch" style="margin-right:10px;text-align:center;padding:6px 15px;border-radius:0px;" class="btn btn-default menublue">
                                <span style="margin-right:10px;" class="fa fa-desktop"></span> Lọc dữ liệu
                            </span>
                            <span id="btnExportExcel" style="text-align:center;padding:6px 15px;border-radius:0px;" class="btn btn-default menublue">
                                <span style="margin-right:10px;" class="fa fa-mail-forward"></span> Xuất dữ liệu
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 " style="padding:0px;">
                    <div id='jqxWidget' style="width:100% !important;font-size: 13px; font-family: Verdana; float: left;">
                            <div id="jqxgrid" style="width:100% !important;"></div>
                    </div>
                    <div id="eventslog" style="display: none; margin-top: 30px;">
                        <div style="float: left;">
                            Event Log:
                <div style="border: none;" id="events">
                </div>
                        </div>
                        <div style="float: left;">
                            Paging Details:
                <div id="paginginfo">
                </div>
                        </div>
                    </div>
                    <div id="popupWindow">
                        <div>
                            Xóa email
                        </div>
                        <div style="overflow: hidden;">
                            <p>
                                Bạn có chắc là muốn xóa email này không?
                            </p>
                            <button id="del">
                                Yes</button>
                            <button id="cancel">
                                No</button>
                        </div>
                    </div>
                </div>
            </div>
            </asp:Panel>
        </div>
    </div>
</div>
    <script type="text/javascript">
        jQuery(function ($) {
            $("#btnExportExcel").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'emaillist');
            });

            $("#btnSearch").click(function () {
                var url = "emaillist.aspx/Search";
                $("#jqxgrid").jqxGrid('showloadelement');
                var postValue = "{name:'" + $('#ContentPlaceHolder1_txtName').val() + "',phone:'" + $('#ContentPlaceHolder1_txtPhone').val() + "',email:'" + $('#ContentPlaceHolder1_txtEmail').val() + "',group:" + $('#ContentPlaceHolder1_drlNhomMail').val() + ",status:" + $('#ContentPlaceHolder1_ddlStatus').val() + "}";
                $.ajax({
                    type: "POST",
                    url: "emaillist.aspx/Search",
                    data: postValue,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Id', type: 'decimal' },
                        { name: 'Email', type: 'string' },
                        { name: 'Name', type: 'string' },
                          { name: 'Phone', type: 'string' },
                          { name: 'Gender', type: 'string' },
                          { name: 'Address', type: 'string' },
                          { name: 'Job', type: 'string' },
                          { name: 'Status', type: 'string' },
                        { name: 'BirthDay', type: 'date' }
                    ],
                    id: 'Id',
                    localdata: data,
                    pager: function (pagenum, pagesize, oldpagenum) {
                    }
                };
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        $("#jqxgrid").jqxGrid(
                        {

                            width: $('#jqxWidget').width(),
                            source: dataAdapter,
                            selectionmode: 'multiplerowsextended',
                            sortable: true,
                            pageable: true,
                            autoheight: true,
                            enabletooltips: true,
                            columnsresize: true,
                            columns: [
                              { text: 'Họ tên', datafield: 'Name',width:'160' },
                              { text: 'Email', datafield: 'Email', cellsformat: 'D', width: '200' },
                              { text: 'Số điện thoại', datafield: 'Phone', cellsformat: 'F2', cellsalign: 'right' },
                              { text: 'Giới tính' },
                              { text: 'Địa chỉ', datafield: 'Address' },
                              { text: 'Nghề nghiệp', datafield: 'Job'},
                              { text: 'Ngày sinh', datafield: 'BirthDay', cellsformat: 'dd/MM/yyyy' },
                              { text: 'Trạng thái', datafield: 'Status' },
                              
                                {
                                    text: 'Chỉnh sửa', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                                        return "Chỉnh sửa";
                                        //return '<input type="image" style="margin-left: 5px;" height="30" width="30" src="../resource/images/delete-icon.png"/>';
                                    }, buttonclick: function (row) {
                                        editrowindex = row;
                                        var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "Id");
                                        window.location = 'email.aspx?CustomerId=' + id;
                                    }
                                },
                                {
                                    text: 'Xóa', datafield: 'Delete', columntype: 'button', cellsrenderer: function () {
                                        return "Xóa";
                                    }, buttonclick: function (row) {
                                        // open the popup window when the user clicks a button.
                                        id = $("#jqxgrid").jqxGrid('getrowid', row);
                                        var offset = $("#jqxgrid").offset();
                                        $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                        // show the popup window.
                                        $("#popupWindow").jqxWindow('show');
                                    }
                                }]
                        });

                    }
                });
            });
            $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
            $("#del").jqxButton({ theme: theme });
            $("#cancel").jqxButton({ theme: theme });
            $("#del").click(function () {
                $.ajax({
                    type: "POST",
                    url: "emaillist.aspx/DeleteEmail",
                    data: "{id:" + id + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $('#jqxgrid').jqxGrid('deleterow', id);
                        $("#popupWindow").jqxWindow('hide');
                    }
                });
            });
            $("#cancel").click(function () {
                $("#popupWindow").jqxWindow('hide');
            });
        });
    </script>
</asp:Content>
